<template>
	<view>
		<u-sticky offset-top="0">
			<navBarView title="法律计算器" :statusBarHeight="statusBarHeight"></navBarView>
		</u-sticky>
		<view class="" style="height: 30rpx;"></view>
		<view @click="chooseCaseTypeClick" class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				案件类型
			</view>
			<view class="flex-row-flex-end">
				<input v-model="caseType" class="inputView" disabled="true" placeholder="请选择"/>
				<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
			</view>
		</view>
		<view class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				律师费金额<text style="font-family: DIN, DIN;font-weight: 500;font-size: 36rpx;color: #FF4C4C;margin-left: 30rpx;">￥:</text>
			</view>
			<input v-model="value" class="inputView4" placeholder="请输入"/>
		</view>
		<view @click="chooseProvinceClick" class="contentView flex-row-space-between" style="margin-top: 10rpx;">
			<view class="name">
				所在省份
			</view>
			<view class="flex-row-flex-end">
				<input v-model="province" class="inputView" disabled="true" placeholder="请选择"/>
				<image src="/static/my/mine_blackarrow.png" style="width: 32rpx;height: 32rpx;"></image>
			</view>
		</view>
		<view @click="loginMobile()" class="loginButton">
			提交认证
		</view>
		<view class="resultV">
			<text class="resultText">计算结果：</text>律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额律师费金额
		</view>
		
		<u-action-sheet @close="chooseCaseTypeClick" @select="selectClick" :actions="caseTypeList" :closeOnClickOverlay="true" :show="isShowCaseType"></u-action-sheet>
		<u-picker @cancel="chooseProvinceClick" @change="changeProvinceClick" @confirm="confirmProvinceClick" :show="isShowProvinceList" :columns="provinceList"></u-picker>

	</view>
</template>

<script>

import AddressList from '@/Network/ProvinceCityDistrictDataJS/address.js';

	export default {
		
		onShow() {
			let sysInfo = uni.getSystemInfoSync()
			this.statusBarHeight = sysInfo.statusBarHeight; // 状态栏高度
			this.criminalTypeViewTopHeight = 88+15; // case tyep 距离顶部高度
		},
		data() {
			return {
				statusBarHeight: '',// 状态栏高度 
				
				isShowCaseType:false,//案件类型弹窗是否显示
				caseTypeList:[{name:'民事'},{name:'行政'},{name:'刑事'},{name:'仲裁'},{name:'非诉'}],//案件类型列表
				caseType:'',
				
				isShowProvinceList:false,//34个省级单位弹窗是否显示
				provinceList:[],//34个省级单位
				province:'',
				provinceTemp:''
			}
		},
		onLoad() {
			this.provinceTemp = '北京市'
			let list = []
			for (var i = 0; i < AddressList.addressList.length; i++) {
				let dic = AddressList.addressList[i]
				list.push(dic.value)
			}
			this.provinceList = [list]
		},
		methods: {
			confirmProvinceClick(){
				this.isShowProvinceList = !this.isShowProvinceList
				this.province = this.provinceTemp
			},
			changeProvinceClick(e){
				console.log(e)
				this.provinceTemp = e.value[0]
			},
			chooseProvinceClick(){
				this.isShowProvinceList = !this.isShowProvinceList
			},
			chooseCaseTypeClick(){
				this.isShowCaseType = !this.isShowCaseType
			},
			selectClick(item){
				this.isShowCaseType = false
				console.log(item)
				this.caseType = item.name
			},
		}
	}
</script>

<style>
	.resultV{
		margin-top: 20rpx;
		margin-left: 24rpx;
		width: 702rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333;
	}
	.resultText{
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #666666;
	}
	.loginButton {
		margin-top: 20rpx;
		margin-left: 24rpx;
		width: 702rpx;
		height: 90rpx;
		background: linear-gradient( to bottom, #E93548 0%, #F35B43 100%);
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(235,43,59,0.4);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
	}
	.inputView{
		width: 440rpx;
		margin-left: 12rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		text-align: right;
	}
	.inputView4{
		width: 456rpx;
		margin-left: 88rpx;
		font-family: DIN, DIN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FF4C4C;
		text-align: left;
	}
	.name{
		width: 250rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.contentView{
		padding-left: 24rpx;
		padding-right: 24rpx;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
	}
</style>
